<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        /* 默认大小100px,下面的js会根据视口宽度调整 */
        font-size: 100px;
    }

    body {
        /* font-size会继承,在这里重置字体大小 */
        font-size: 16px;
    }

    .box {
        display: flex;
    }

    .box div {
        height: 1.875rem;
        width: 1.875rem;
    }
</style>

<body style="font-size:16px;">
    <script>
        window.onresize = function () {
            // 获取新设备视口宽度
            var newPhone = document.documentElement.clientWidth;
            // 新设备根标签font-size = 新设备视口宽度 * 100 / 375
            document.documentElement.style.fontSize = newPhone * 100 / 375 + 'px';
        }
    </script>

    <div class="box">
        <div style="background-color: gray;"></div>
        <div style="background-color: gold"></div>
    </div>
</body>

</html>